/**
 * Created by wkj on 2017/3/23.
 */
import React, { Component } from 'react';
import {
    StyleSheet, View, TouchableOpacity,
} from 'react-native';
import { MtChar, MtColor } from 'martian-ui';
const { MtL3 } = MtChar;
const MtIcon = require('martian-icon');

class ConditionButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: false,
        };
    }

    clean() {
        this.setState({
            selected: false,
        });
    }

    render() {
        const { title, onSelect, checked, containerStyle, contentContainerStyle } = this.props;
        const { selected } = this.state;
        return (
            <TouchableOpacity
                style={[styles.touchableStyle, containerStyle]}
                // onPress={onSelect}
                onPress={() => {
                    this.setState({ selected: !selected });
                    onSelect(!selected);
                }}
            >
                <View style={[styles.container, contentContainerStyle]}>
                    <MtL3 style={[{ marginRight: 5 }, (selected || checked) && { color: '#000000' }]}>{title}</MtL3>
                    <MtIcon
                        name={selected ? 'triangleUp' : 'triangleDown'}
                        size={10}
                        color={selected || checked ? '#000000' : MtColor.gray}
                    />
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    touchableStyle: {
        flex: 1,
        height: 50,
    },
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        marginLeft: 10,
        flex: 1,
        height: 50,

    },
});

module.exports = ConditionButton;
